<template>
  <div class="con">
    <div class="top">
        <van-icon name="arrow-left" @click="fun"/>
        <p>天选高性能游戏电脑_华硕商城</p>
        <van-icon name="ellipsis" />
    </div>
    <!-- 图片 -->
    <img :src="v" class="img1" v-for="(v,index) in img" :key="index">
    <!-- 锐龙专区 -->
    <img :src="data1[0].title" alt="" class="img1">
    <img :src="data1[0].img1" alt="" class="img1">
        
    <div class="box1">
            <div class="box2" v-for="(v,index) in data1" :key="index">
                <img :src="v.myimg" alt="" @click="fun1(index)">
                <h4>&nbsp;&nbsp;{{v.urname}}</h4>
                <p>&nbsp;&nbsp;{{v.introduce}}</p>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span> &nbsp;&nbsp; ￥{{v.moeny}}</span>
                    &nbsp;&nbsp;<del>￥{{v.before}}</del>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
    </div>

    <!-- 天选生态圈 -->
    <img :src="v" class="img1" v-for="(v,index) in img1" :key="index">

    <!-- 台式电脑区 -->
 
        
    <div class="box1">
            <div class="box2" v-for="(v,index) in data3" :key="index">
                <img :src="v.myimg" alt=""  @click="fun3(index)">
                <h4>&nbsp;&nbsp;{{v.urname}}</h4>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span> &nbsp;&nbsp;￥{{v.moeny}}</span>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
    </div>

    <div class="box1">
            <div class="box2">
                <img :src="data3[2].myimg" alt="" @click="fun3(2)">
                <h4>&nbsp;&nbsp;{{data3[2].urname}}</h4>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span> &nbsp;&nbsp;￥{{data3[2].moeny}}</span>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
            <div class="box2">
                <img :src="data3[3].myimg" alt="" @click="fun3(3)">
                <h4>&nbsp;&nbsp;{{data3[3].urname}}</h4>
                <div class="sss">赠品</div>
                <div class="liji">
                    <span> &nbsp;&nbsp;￥{{data3[3].moeny}}</span>
                    <div class="qg">立即抢购</div>
                </div>
            </div>
    </div>

    <img :src=" img2" alt="" class="img2" @click="fun">


  </div>
</template>

<script>
export default {

        data() {
            return {
                img: [],
                img1: [],
                img2: [],
                data1: [],
                data2: [],
                data3:[]
            }
        },
        mounted() {
            this.$http({
                    url:"http://localhost:3000/navigation2"
            }).then(res => {
                console.log(res.data[0].data.data3)
                    this.img=res.data[0].data.img
                    this.data1=res.data[0].data.data1
                    this.data2=res.data[0].data.data2
                this.img1 = res.data[0].data.img1
                this.data3 = res.data[0].data.data3
                this.img2 = res.data[0].data.img2

                console.log(this.data3);
                    
             })
        },
        methods: {
            fun() {
            window.scrollTo({left:0,top:0})
            this.$router.push({
                path:"/home"
            }).catch(err => err)
            },
        fun1(index) {
            this.$router.push({
                path: "/content",
                query: {
                    data1: this.data1[index],
                    id:1
                }
            }).catch(err => err)
            },
        fun3(index) {
            this.$router.push({
                path: "/content",
                query: {
                    data1: this.data3[index],
                    id:1
                }
            }).catch(err => err)
        },
     }
        
        
        
    

}
</script>

<style lang="scss" scoped>
.con{
    background-color: rgb(1, 243, 203);
    .img1{
            width: 95vw;
            display: block;
            margin: auto;
            margin-top: 3vw;
        }
    .img2{
        width: 95vw;
            display: block;
            margin: auto;
            margin-top: 5vw;
    }
        .box1{
            width: 95vw;
            margin-top: 4vw;
            display: flex;
            background-color: rgb(1, 243, 203);

            .box2{
            width: 44vw;
            height: 78vw;
            background-color: white;
            margin:0 3vw;
            img{
                width: 44vw;
            }
            h4{
                margin: 0;
                font-size: 4.8vw;
                font-weight: normal;
            }
            p{
                margin: 0;
                font-size: 3.8vw;
                color: #8d9eb0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .sss{
                width: 12vw;
                height: 6vw;
                background-color: #f5a623;
                color: white;
                font-size: 3.6vw;
                line-height: 6vw;
                text-align: center;
                margin-left: 2vw;
            }
            .liji{
                width: 44vw;
                height: 12vw;
                span{
                    display: block;
                    color: red;
                    font-size: 4.6vw;
                }
                del{
                    font-size: 4vw;
                    color: #8da1c6;
                }
                .qg{
                    float: right;
                    font-size: 3vw;
                    width: 9vw;
                    height: 9vw;
                    background-color: #f9453d;
                    color: white;
                    text-align: center;
                    border-radius: 2vw;
                    margin-right: 2vw;
                }
            }

            }
        }
}
  .top{
        width: 100vw;
        position:sticky;
        top: 0;
        height: 12vw;
        background-color: #e8e8e8;
        display: flex;
        justify-content: space-around;
        align-items: center;
        p{
            margin: 0;
            
        }
    }
</style>